<template>
	<view class="faq-page">
		
		<!-- 问题列表 -->
		<view class="question-list">
			<view class="question-item" @click="goQuestionDetail(1)">
				<view class="question-icon">
					<text class="icon-text">?</text>
				</view>
				<text class="question-title">关于优享优品平台余额提现收费规则说明</text>
				<view class="question-arrow">
					<u-icon name="arrow-right" color="#ccc" size="16"></u-icon>
				</view>
			</view>
			
			<view class="question-item" @click="goQuestionDetail(2)">
				<view class="question-icon">
					<text class="icon-text">?</text>
				</view>
				<text class="question-title">优享优品平台余额提现到账时间说明</text>
				<view class="question-arrow">
					<u-icon name="arrow-right" color="#ccc" size="16"></u-icon>
				</view>
			</view>
			
			<view class="question-item" @click="goQuestionDetail(3)">
				<view class="question-icon">
					<text class="icon-text">?</text>
				</view>
				<text class="question-title">优享优品平台余额发起提现后可加急处...</text>
				<view class="question-arrow">
					<u-icon name="arrow-right" color="#ccc" size="16"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			questionList: [
				{
					id: 1,
					title: '关于优享优品平台余额提现收费规则说明',
					content: '提现手续费说明...'
				},
				{
					id: 2,
					title: '优享优品平台余额提现到账时间说明',
					content: '提现到账时间说明...'
				},
				{
					id: 3,
					title: '优享优品平台余额发起提现后可加急处理说明',
					content: '加急处理说明...'
				}
			]
		}
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},
		
		// 跳转到问题详情
		goQuestionDetail(questionId) {
			uni.navigateTo({
				url: `/pages/help/question-detail?id=${questionId}`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.faq-page {
	background-color: #f5f5f5;
	min-height: 100vh;
}

// 顶部导航栏
.nav-header {
	height: 88rpx;
	background-color: #ff5722;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	position: relative;
	
	.nav-back {
		position: absolute;
		left: 30rpx;
	}
	
	.nav-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #fff;
		flex: 1;
		text-align: center;
	}
}

// 问题列表
.question-list {
	background-color: #fff;
	margin-top: 20rpx;
	
	.question-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		
		&:last-child {
			border-bottom: none;
		}
		
		.question-icon {
			width: 60rpx;
			height: 60rpx;
			background-color: #4CAF50;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 24rpx;
			
			.icon-text {
				font-size: 24rpx;
				color: #fff;
				font-weight: bold;
			}
		}
		
		.question-title {
			flex: 1;
			font-size: 28rpx;
			color: #333;
			line-height: 1.4;
		}
		
		.question-arrow {
			margin-left: 20rpx;
		}
	}
}
</style>